<template>
  <div class="orderItem">
    <div class="top">
      <div class="time">{{ order._add_time }}</div>
      <div class="status">{{ order._status._title }}</div>
    </div>
    <div class="cartList">
      <div
        class="card"
        v-for="item in order.cartInfo"
        :key="item.id"
        @click="$router.push('/detail/' + item.productInfo.id)"
      >
        <van-card
          :num="item.cart_num"
          :price="item.truePrice"
          :desc="item.productInfo.attrInfo.suk"
          :title="item.productInfo.store_name"
          :thumb="item.productInfo.image"
        />
      </div>
    </div>
    <div class="totalPrice">
      共{{ order.cartInfo.length }}件商品，总金额<span
        >￥{{ order.total_price }}</span
      >
    </div>
    <div class="bottom">
      <van-button
        round
        color="#25c9c3"
        @click="$router.push('/order/detail/' + order.order_id)"
        >查看详情</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: ["order"],
};
</script>

<style lang="less" scoped>
.orderItem {
  margin: 15px;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  .top {
    height: 42px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
    .status {
      color: #25c9c3;
    }
  }
  .cartList {
    .card {
      padding: 0 20px;
      background: #fff;
      &:active {
        background: #f2f3f5;
      }
      &:not(:first-child) .van-card {
        border-top: 1px solid #f5f5f5;
      }
      .van-card {
        padding: 15px 0;
        background: inherit;
        .van-card__thumb {
          height: 75px;
          width: 75px;
        }
        .van-card__content {
          min-height: 75px;
        }
      }
    }
  }
  .totalPrice {
    height: 42px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 15px;
    margin-left: 15px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
    span {
      font-size: 14px;
      font-weight: 600;
      color: #25c9c3;
    }
  }
  .bottom {
    height: 50px;
    padding: 0 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .van-button {
      height: 30px;
      font-size: 13px;
    }
  }
}
</style>